<template>
    <!-- 编辑资料 -->
    <div class="edit-page">
        <h1>编辑资料</h1>
        <!-- 资料展示,头像、email、昵称、个性签名、 并修改 -->
        <validate-form @form-submit="onFormSubmit">
        <div class="mb-3">
          <label class="form-label">邮箱地址</label>
          <validate-input
            :rules="emailRules" v-model="formData.email"
            placeholder="请输入邮箱地址"
            type="text"
          />
        </div>
        <div class="mb-3">
          <label class="form-label">昵称</label>
          <validate-input
            :rules="nameRules" v-model="formData.nickName"
            placeholder="请输入昵称"
            type="text"
          />
        </div>
        <!-- description -->
        <div class="mb-3">
          <label class="form-label">个性签名</label>
          <validate-input
            v-model="formData.description"
            placeholder="请输入个性签名"
            type="text"
          />
        </div>
       
        
        <!-- <div class="mb-3">
          <label class="form-label">重复密码</label>
          <validate-input
            type="password"
            placeholder="请再次密码"
            :rules="repeatPasswordRules"
            v-model="formData.repeatPassword"
          />
        </div> -->
        <template #submit>
          <button type="submit" class="btn btn-primary btn-block btn-large" @click="onSubmit">更新资料</button>
        </template>
      </validate-form>

    </div>
</template>

<script lang="ts">
import { defineComponent,computed,reactive, onMounted,ref } from 'vue';
import { useRouter } from 'vue-router';
import ValidateInput, { RulesProp } from '../components/ValidateInput.vue'
import ValidateForm from '../components/ValidateForm.vue'
import createMessage from '../components/createMessage' 
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { GlooalDataProps,UserProps } from '../store';
export default defineComponent({
    name:'Edit',
    components:{
        ValidateInput,
        ValidateForm
    },
    setup(){
        
        const router = useRouter();
        const route = useRoute();
        const store = useStore<GlooalDataProps>()
        const newUser = ref<UserProps>()
        newUser.value = store.state.user
        const formData = reactive({
            email: '',
            nickName: '',
            description: '',
            repeatPassword: ''
        })
        onMounted(()=>{
            formData.email = newUser.value?.email || ''
            formData.nickName = newUser.value?.nickName || ''
            formData.description = newUser.value?.description || ''
        })
        const emailRules: RulesProp = [
        { type: 'required', message: '电子邮箱地址不能为空' },
        { type: 'email', message: '请输入正确的电子邮箱格式' }
      ];
      const nameRules: RulesProp = [
        { type: 'required', message: '昵称不能为空' }
      ];
 
       
        const user = computed(()=>store.state.user)
        const onSubmit = ()=>{
            newUser.value!.nickName = formData.nickName
            newUser.value!.description = formData.description
            newUser.value!.email = formData.email
            store.dispatch('updateUser',{
                id:newUser.value?._id,
                payload:newUser.value
            })
                createMessage('更新成功','success')
            
            
                }

        return {
            user,
            onSubmit,
            emailRules,
            nameRules,
          
            formData
        }
    }
    
})
</script>
